<template>
  <div class="index-container">
    <el-card>
      <h3>项目简介</h3>
      <div class="describe">该项目基于Vue3 + Element-Plus开发的企业后台管理平台,通过该项目可以学习到Vue3以及周边技术栈的开发使用</div>
      <h3>项目技术栈</h3>
      <div class="container">
        <div class="items">Vue 3.0</div>
        <div class="items">Vite 2.0</div>
        <div class="items">Vue-Router 4.0</div>
        <div class="items">Echart 5.0</div>
        <div class="items">Element-Plus</div>
        <div class="items">Axios</div>
        <div class="items">VueX 4.0</div>
        <div class="items">wangEditor 4.x</div>
      </div>
      <h3>Vue3推荐教程</h3>
      <div class="container">
        <div class="items">
          <a
            target="_blank"
            href="https://www.bilibili.com/video/BV1ra4y1H7ih?from=search&seid=14985448502576770039"
          >尚硅谷Vue3教程</a>
        </div>
        <div class="items">
          <a
            target="_blank"
            href="https://www.bilibili.com/video/BV1ra4y1H7ih?from=search&seid=14985448502576770039"
          >尚硅谷Ts教程</a>
        </div>
        <div class="items">
          <a
            target="_blank"
            href="https://www.bilibili.com/video/BV1SZ4y157m8?from=search&seid=9108570259244443008"
          >慕课网Vite 2.0</a>
        </div>
      </div>
      <h3>联系作者</h3>
      <div class="contact">
        <div class="flex-item">
          <span>微信 :</span>
          <img width="140" height="140" src="../../assets/images/Wechat.jpeg" alt />
        </div>
        <div class="flex-item">
          <span>邮箱 :</span>
          <span>randianx@126.com</span>
        </div>
      </div>
      <div id="myecharts"></div>
    </el-card>
  </div>
</template>

<script>
import { onMounted, onUnmounted, reactive, toRefs } from 'vue'
import * as echarts from 'echarts'
import { GET_USERSOURCE } from '../../api/request'
let myChart = null
export default {
  name: 'Index',
  setup() {
    // 获取用户来源
    const state = reactive({
      option: {},
      myChart: '',
    })
    const getUserSource = async () => {
      const {
        data: {
          legend: { data: legend },
          series,
          xAxis,
          yAxis,
        },
      } = await GET_USERSOURCE()
      initMycharts(legend, series, xAxis, yAxis)
    }
    const initMycharts = (legend, series, xAxis, yAxis) => {
      state.option = {
        title: {
          text: '数据统计',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985',
            },
          },
        },
        legend: {
          data: legend,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: xAxis[0].data,
          },
        ],
        yAxis: [
          {
            type: 'value',
          },
        ],
        series: series,
      }
      state.myChart.setOption(state.option)
    }
    onMounted(() => {
      getUserSource()
      // 初始化echarts实例
      state.myChart = echarts.init(document.getElementById('myecharts'))
      // 指定图表配置数据
    })
    onUnmounted(() => {
      state.myChart.dispose()
    })
  },
}
</script>

<style scoped lang="scss">
#myecharts {
  min-height: 300px;
}
a {
  text-decoration: none;
  color: #fff;
}
.describe {
  text-indent: 1em;
}
.container {
  display: flex;
  flex-wrap: wrap;
  .items {
    width: 200px;
    height: 50px;
    background-image: linear-gradient(to right, #ff9569 0%, #e92758 100%);
    background-image: linear-gradient(-90deg, #29bdd9 0%, #276ace 100%);
    border-radius: 0 20px 20px 0;
    text-indent: 1em;
    line-height: 50px;
    color: #fff;
    font-size: 20px;
    margin-right: 80px;
    margin-bottom: 30px;
  }
}
.contact {
  display: flex;
  .flex-item {
    display: flex;
    align-items: center;
    margin-right: 50px;
  }
}
</style>
